<template>
	<view class="content">
		<view class="block search-block">
			<Search class="search-components"></Search>
		</view>
		<view class="block list-block">
			<navigator hover-class="none" url="/pages/specialty/list" v-for="(item,index) in list" :key="item.id" class="list-item">
				<image mode="aspectFill" class="photo" :src="item.photo"></image>
				<view class="info-block">
					<view class="name">{{item.name}}</view>
					<view class="position">
						<view class="iconfont icon-weizhi"></view>{{item.position}}
					</view>
					<view class="goods-block">
						<view v-for="(item1,index1) in item.goods" :key="item1.id" class="goods-item">
							<image mode="aspectFill" :src="item1.photo" class="goods-photo"></image>
							<view class="goods-name">{{item1.name}}</view>
							<view class="goods-price">￥{{item1.price}}</view>
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						photo: 'http://p0.meituan.net/ugcpic/28b6847bb6569bcfa01c6566ae8c4012_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',
						name: '酒泉牌夜光杯专卖店（民意街直营店）',
						position: '甘肃省酒泉市肃州区民意街',
						goods: [
							{id:4,photo:'http://p0.meituan.net/ugcpic/28b6847bb6569bcfa01c6566ae8c4012_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'中华老字号夜光杯1',price:323},
							{id:5,photo:'http://p0.meituan.net/ugcpic/28b6847bb6569bcfa01c6566ae8c4012_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'中华老字号夜光杯2',price:311},
							{id:6,photo:'http://p0.meituan.net/ugcpic/28b6847bb6569bcfa01c6566ae8c4012_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'中华老字号夜光杯3',price:389},
						]
					},
					{
						id: 2,
						photo: 'https://p1.meituan.net/merchant/9441000a747d0f1be396394cb9db7df890820.jpg@380w_214h_1e_1c',
						name: '肃州区肃源糊锅',
						position: '甘肃省酒泉市肃州区尚武街',
						goods: [
							{id:7,photo:'https://p0.meituan.net/208.126/deal/82743c876b72b9f93f913ab14d70830743029.jpg@100w_100h_1e_1c',name:'糊锅大份',price:8},
							{id:8,photo:'https://p1.meituan.net/merchant/9441000a747d0f1be396394cb9db7df890820.jpg@380w_214h_1e_1c',name:'双人份糊锅',price:15},
							{id:9,photo:'https://p0.meituan.net/208.126/deal/3534470db262b3c962f531b4615317ff50852.jpg@100w_100h_1e_1c',name:'肉夹馍',price:7},
						]
					},
					{
						id: 3,
						photo: 'http://p0.meituan.net/ugcpic/729398bea599df21047862095d61483e_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',
						name: '汉武御翠苑生活超市',
						position: '甘肃省酒泉市肃州区巨龙御园',
						goods: [
							{id:10,photo:'http://p0.meituan.net/ugcpic/729398bea599df21047862095d61483e_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'汉武御42度浓香型白酒',price:108},
							{id:11,photo:'http://p0.meituan.net/ugcpic/729398bea599df21047862095d61483e_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'汉武御42度礼泉浓香型白酒',price:145},
							{id:12,photo:'http://p0.meituan.net/ugcpic/729398bea599df21047862095d61483e_1_b8eb8f1aa8e3ef7a_1_vCZ3FkX6KyBJmIohC6Ohx8jxcMxT1rzH/qbEYgcUm2vm/D8JzMr0B5GnXkQJ/jiz6NjzTxgAWJMjUrJELftxGWSdu4Cp8H1Rj/pdZh8+Hz8=',name:'汉武御42度青瓷千年浓香型白酒',price:108},
						]
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.block {
			display: flex;
			width: 100%;
		}

		.block.search-block {
			padding: 30rpx;
			.search-components {
				width: 100%;
			}
		}
		.block.list-block{
			padding: 20rpx;
			flex-direction: column;
			.list-item{
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0px rgba(0, 0, 0,0.08);
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				.photo{
					width: 170rpx;
					height: 170rpx;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}
				.info-block{
					width: calc(100% - 190rpx);
					display: flex;
					flex-direction: column;
					.name{
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.position{
						margin: 10rpx 0;
						color: $color-secondary-text;
						font-size: 26rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						.iconfont{
							margin-right: 10rpx;
						}
					}
					.goods-block{
						display: flex;
						flex-direction: row;
						.goods-item{
							width: calc((100% - 20rpx)/3);
							display: flex;
							flex-direction: column;
							margin-right: 10rpx;
							.goods-photo{
								width: 100%;
								height: 153rpx;
								border-radius: 6rpx;
							}
							.goods-name{
								font-size: 28rpx;
								margin-top: 10rpx;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
							}
							.goods-price{
								color: $color-danger;
								font-size: 28rpx;
							}
						}
						.goods-item:last-child{
							margin-right: 0;
						}
					}
				}
			}
			.list-item:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>
